<template>
  <view class="goods-list">
    <!-- 搜索框 -->
    <YgSearch></YgSearch>
    <!-- tab栏 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      active-color="#ea4350"
      @change="change"
    ></u-tabs>
    <!-- 商品列表内容 -->
    <view class="goods-content" v-if="current === 0">
      <navigator
        class="goods_item u-flex u-margin-bottom-10"
        v-for="item in goods"
        :key="item.goods_id"
        ><view width="80%" class="goods_img u-flex-1">
          <u-image :src="item.goods_small_logo" mode="widthFix"></u-image
        ></view>
        <view class="goods-info u-flex-2">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">￥{{ item.goods_price }}</view></view
        >
      </navigator>
    </view>
    <view class="goods-content" v-else-if="current === 1">销量内容</view>
    <view class="goods-content" v-else-if="current === 2">价格内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      //   商品数组
      goods: [],
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
  },
  async onLoad() {
    const id = 187;
    const res = await this.$u.get("/goods/search", { cid: id });
    console.log(res);
    this.goods = res.message.goods;
  },
};
</script>
<style lang="scss">
.goods_item {
  align-items: stretch;
  border-bottom: 1rpx solid #fff;
}
.goods-info {
  height: 100%;
  background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>